<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="../../../css/mdb.min.css" rel="stylesheet">

</head>

<body class="fixed-sn purple-skin">

    <!--Double navigation-->
    <header>
        <!-- Sidebar navigation -->
        <ul id="slide-out" class="side-nav fixed custom-scrollbar">

            <!-- Logo -->
            <li>
                <div class="logo-wrapper waves-light">
                    <a href="#"><img src="http://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-fluid flex-center"></a>
                </div>
            </li>
            <!--/. Logo -->

            <!--Social-->
            <li>
                <ul class="social">
                    <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
                    <li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a></li>
                    <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="icons-sm"><i class="fa fa-twitter"> </i></a></li>
                    <li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
                </ul>
            </li>
            <!--/Social-->

            <!-- Side navigation links -->
            <ul class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-cutlery"></i> Categories<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Breakfast</a>
                            </li>
                            <li><a href="#" class="waves-effect">Sandwiches</a>
                            </li>
                            <li><a href="#" class="waves-effect">Lunch</a>
                            </li>
                            <li><a href="#" class="waves-effect">Dessert</a>
                            </li>
                            <li><a href="#" class="waves-effect">Snacks</a>
                            </li>
                            <li><a href="#" class="waves-effect">Soups</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-coffee"></i> Workshops<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">How it looks?</a>
                            </li>
                            <li><a href="#" class="waves-effect">Cooking workshops</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-thumbs-o-up"></i> Collaboration<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">My past collaborations</a>
                            </li>
                            <li><a href="#" class="waves-effect">Write me your idea</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Gallery<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Photos</a>
                            </li>
                            <li><a href="#" class="waves-effect">Videos</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-newspaper-o"></i> Publications<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Media</a>
                            </li>
                            <li><a href="#" class="waves-effect">Books</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-heart"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#" class="waves-effect">Why this blog?</a>
                            </li>
                            <li><a href="#" class="waves-effect">Something about me</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!--/. Side navigation links -->
        </ul>
        <!--/.Sidebar navigation -->

        <!--Navbar-->
        <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">

            <!-- SideNav slide-out button -->
            <div class="float-xs-left">
                <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
            </div>

            <!-- Breadcrumb-->
            <div class="breadcrumb-dn">
                <p>MDB Blog Post</p>
            </div>


            <ul class="nav navbar-nav float-xs-right">

                <li class="nav-item ">
                    <a class="nav-link"> <span class="tag red z-depth-1">2</span> <i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">Register</span></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> <span class="hidden-sm-down">Profile</span></a>
                    <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                        <a class="dropdown-item" href="#">Logout</a>
                        <a class="dropdown-item" href="#">My account</a>
                    </div>
                </li>
            </ul>

        </nav>
        <!--/.Navbar-->
    </header>
    <!--/Double navigation-->

    <!--Main layout-->
    <main>
        <div class="container-fluid">
            <div class="row">

                <!--Post column-->
                <div class="col-md-8">

                    <!--Section: Post-->
                    <section class="section section-blog-fw">

                        <!--First row-->
                        <div class="row">
                           
                            <div class="col-md-12 wow fadeInUp">
                               
                                <!--Featured image-->
                                <img src="http://mdbootstrap.com/images/slides/slide%20(16).jpg">

                                <!--Post data-->
                                <div class="jumbotron wow fadeInUp" data-wow-delay="0.2s">
                                    <h2>How I've started my adventure with surfing?</h2>
                                    <p>Written by <a>John Doe</a>, 26.03.2016</p>

                                    <!--Social shares-->
                                    <div class="social-counters ">

                                        <!--Facebook-->
                                        <a class="btn btn-fb ">
                                            <i class="fa fa-facebook left "></i>
                                            <span class="hidden-md-down ">Facebook</span>
                                        </a>
                                        <span class="counter ">35</span>

                                        <!--Twitter-->
                                        <a class="btn btn-tw ">
                                            <i class="fa fa-twitter left "></i>
                                            <span class="hidden-md-down ">Twitter</span>
                                        </a>
                                        <span class="counter ">23</span>

                                        <!--Google+-->
                                        <a class="btn btn-gplus ">
                                            <i class="fa fa-google-plus left "></i>
                                            <span class="hidden-md-down ">Google+</span>
                                        </a>
                                        <span class="counter ">27</span>

                                        <!--Comments-->
                                        <a class="btn btn-default ">
                                            <i class="fa fa-comments-o left "></i>
                                            <span class="hidden-md-down ">Comments</span>
                                        </a>
                                        <span class="counter ">18</span>

                                    </div>
                                    <!--/.Social shares-->

                                </div>
                                <!--/Post data-->

                                <!--Post text-->
                                <div class="post-text">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ut tempore, cum minus perspiciatis, blanditiis tempora molestias dolorem pariatur deserunt laudantium, reprehenderit! Sed accusamus vitae qui, perferendis
                                        minus.
                                    </p>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.Lorem ipsum
                                        dolor sit amet, consectetur adipisicing elit. Ipsa expedita quia animi placeat repudiandae, eius quos. Modi nulla, nisi itaque ullam ab, aliquam velit facilis, explicabo, eius saepe maxime quod.</p>
                                </div>
                                <!--/Post text-->

                                <hr>

                                <div class="text-xs-center">
                                    <h3 class="h3-responsive">Do you want to share?</h3>
                                    <!--Facebook-->
                                    <a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a>
                                    <!--Twitter-->
                                    <a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a>
                                    <!--Google +-->
                                    <a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a>
                                </div>
                                
                            </div>
                            
                        </div>
                        <!--/First row-->
                        
                    </section>
                    <!--/Section: Post-->

                    <!--Section: About author-->
                    <section class="mb-4">
                        <!--Author box-->
                        <div class="author-box wow fadeInUp" data-wow-delay="0.3s">

                            <div class="row">
                                <!--Name-->
                                <h3 class="h3-responsive text-xs-center">About author</h3>
                                <hr>

                                <!--Avatar-->
                                <div class="col-sm-2 col-xs-12">
                                    <img src="http://mdbootstrap.com/images/avatars/img%20(8).jpg" class="img-fluid rounded-circle z-depth-2">
                                </div>

                                <!--Author Data-->
                                <div class=" col-xs-12 col-sm-10">

                                    <p><strong>John Doe</strong></p>

                                    <div class="personal-sm">
                                        <a class="email-ic"><i class="fa fa-home"> </i></a>
                                        <a href="https://www.facebook.com/mdbootstrap" target="_blank" class="fb-ic"><i class="fa fa-facebook"> </i></a>
                                        <a href="https://twitter.com/MDBootstrap" target="_blank" class="tw-ic"><i class="fa fa-twitter"> </i></a>
                                        <a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="gplus-ic"><i class="fa fa-google-plus"> </i></a>
                                        <a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="li-ic"><i class="fa fa-linkedin"> </i></a>
                                        <a class="email-ic"><i class="fa fa-envelope-o"> </i></a>
                                    </div>

                                    <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
                                </div>

                            </div>
                        </div>
                        <!--/.Author box-->
                    </section>
                    <!--/Section: About author-->

                    <!--Section: Comments list-->
                    <section>
                        <div class="comments-list">
                            <div class="section-heading">
                                <h1>Comments <span class="tag blue">3</span></h1>
                            </div>
                            <!--First row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-xs-12">
                                    <img src="http://mdbootstrap.com/images/avatars/avatar-1.jpg">
                                </div>
                                <!--/.Image column-->

                                <!--Content column-->
                                <div class="col-sm-10 col-xs-12">
                                    <a><h3 class="user-name">Danny Johnson</h3></a>

                                    <div class="card-data">
                                        <ul>
                                            <li class="comment-date"><i class="fa fa-clock-o"></i> 05/10/2015</li>
                                        </ul>
                                    </div>

                                    <p class="comment-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                                        sint occaecat cupidatat non proident.</p>
                                </div>
                                <!--/.Content column-->

                            </div>
                            <!--/.First row-->

                            <!--Second row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-xs-12">
                                    <img src="http://mdbootstrap.com/images/avatars/avatar-2.jpg">
                                </div>
                                <!--/.Image column-->

                                <!--Content column-->
                                <div class="col-sm-10 col-xs-12">
                                    <a><h3 class="user-name">Marta Tev</h3></a>

                                    <div class="card-data">
                                        <ul>
                                            <li class="comment-date"><i class="fa fa-clock-o"></i> 08/10/2015</li>
                                        </ul>
                                    </div>

                                    <p class="comment-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
                                </div>
                                <!--/.Content column-->

                            </div>
                            <!--/.Second row-->

                            <!--Third row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-xs-12">
                                    <img src="http://mdbootstrap.com/images/avatars/img%20(1).jpg">
                                </div>
                                <!--/.Image column-->

                                <!--Content column-->
                                <div class="col-sm-10 col-xs-12">
                                    <a><h3 class="user-name">Anna Maria</h3></a>

                                    <div class="card-data">
                                        <ul>
                                            <li class="comment-date"><i class="fa fa-clock-o"></i> 17/10/2015</li>
                                        </ul>
                                    </div>

                                    <p class="comment-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
                                        in culpa qui officia.
                                    </p>
                                </div>
                                <!--/.Content column-->

                            </div>
                            <!--/.Third row-->

                        </div>
                    </section>
                    <!--/Section: Comments list-->

                    <hr class="between-sections">

                    <!--Section: Leave a reply (Logged In User) -->
                    <section>
                        <div class="reply-form">
                            <h1 class="section-heading">Leave a reply </h1>
                            <p class="text-xs-center">(Logged In User)</p>

                            <!--Third row-->
                            <div class="row">
                                <!--Image column-->
                                <div class="col-sm-2 col-xs-12">
                                    <img src="http://mdbootstrap.com/images/avatars/img%20(3).jpg">
                                </div>
                                <!--/.Image column-->

                                <!--Content column-->
                                <div class="col-sm-10 col-xs-12">
                                    <div class="md-form">
                                        <textarea type="text" id="form8" class="md-textarea"></textarea>
                                        <label for="form8">Your message</label>
                                    </div>

                                    <div class="text-xs-center">
                                        <button class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                                <!--/.Content column-->

                            </div>
                            <!--/.Third row-->
                        </div>
                    </section>
                    <!--/.Section: Leave a reply (Logged In User)-->

                    <hr class="between-sections">

                    <!--Section: Leave a reply (Not Logged In User)-->
                    <section>
                        <div class="reply-form">
                            <h1 class="section-heading">Leave a reply </h1>
                            <p class="text-xs-center">(Not Logged In User)</p>

                            <h4>Sign up with: <span>
                                <!--Facebook-->
                                <a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a>
                                <!--Twitter-->
                                <a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a>
                                <!--Google +-->
                                <a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a>

                            </span> <br><br>or:</h4>

                            <div class="md-form">
                                <i class="fa fa-user prefix"></i>
                                <input type="text" id="form22" class="form-control">
                                <label for="form42">Your name</label>
                            </div>

                            <div class="md-form">
                                <i class="fa fa-envelope prefix"></i>
                                <input type="text" id="form32" class="form-control">
                                <label for="form34">Your email</label>
                            </div>

                            <div class="md-form">
                                <i class="fa fa-home prefix"></i>
                                <input type="text" id="form32" class="form-control">
                                <label for="form34">Your website</label>
                            </div>

                            <div class="md-form">
                                <i class="fa fa-pencil prefix"></i>
                                <textarea type="text" id="form8" class="md-textarea"></textarea>
                                <label for="form8">Your message</label>
                            </div>

                            <div class="text-xs-center">
                                <button class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </section>
                    <!--/Section: Leave a reply (Not Logged In User)-->

                </div>
                <!--/Post column-->

                <!--Right sidebar-->
                <div class="col-md-4">

                        <!--Section: Sidebar widget-->
                        <section>

                            <!--Card-->
                            <div class="card card-cascade wider">

                                <!--Card image-->
                                <div class="view overlay hm-white-slight wow fadeInDown" data-wow-delay="0.2s">
                                    <img src="http://mdbootstrap.com/images/regular/people/img%20(33).jpg" class="img-fluid" alt="">
                                    <a>
                                        <div class="mask"></div>
                                    </a>
                                </div>
                                <!--/.Card image-->

                                <!--Card content-->
                                <div class="card-block text-xs-center wow fadeInDown">
                                    <!--Title-->
                                    <h4 class="card-title">How to travel cheaply?</h4>
                                    <!--Text-->
                                    <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat sunt in culpa nulla pariatur.</p>
                                    <a class="btn btn-primary">Read more</a>
                                </div>
                                <!--/.Card content-->

                            </div>
                            <!--/.Card-->

                        </section>
                        <!--/Section: Sidebar widget-->

                    </div>
                <!--/Right sidebar-->
            </div>
        </div>
    </main>
    <!--/Main layout-->

    <!--Footer-->
    <footer class="page-footer center-on-small-only">

        <!--Footer Links-->
        <div class="container-fluid">
            <div class="row">

                <!--First column-->
                <div class="col-md-3 offset-md-1">
                    <h5 class="title">Footer Content</h5>
                    <p>Here you can use rows and columns here to organize your footer content.</p>
                </div>
                <!--/.First column-->

                <hr class="hidden-md-up">

                <!--Second column-->
                <div class="col-md-2 offset-md-1">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Second column-->

                <hr class="hidden-md-up">

                <!--Third column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Third column-->

                <hr class="hidden-md-up">

                <!--Fourth column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Fourth column-->

            </div>
        </div>
        <!--/.Footer Links-->

        <hr>

        <!--Call to action-->
        <div class="call-to-action">
            <ul>
                <li>
                    <h5>Register for free</h5></li>
                <li><a href="" class="btn btn-danger">Sign up!</a></li>
            </ul>
        </div>
        <!--/.Call to action-->

        <hr>

        <!--Social buttons-->
        <div class="social-section">
            <ul>
                <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                <li><a href="https://www.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                <li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                <li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>
        </div>
        <!--/.Social buttons-->

        <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

            </div>
        </div>
        <!--/.Copyright-->

    </footer>
    <!--/.Footer-->


    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="../../../js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

    <script>
        // SideNav init
        $(".button-collapse").sideNav();
        var el = document.querySelector('.custom-scrollbar');
        Ps.initialize(el);
    </script>

    <script>
        new WOW().init();
    </script>

</body>

</html>